<template>
   <div class="el-container" ref="father" @scroll="handlerScroll">
    <ul>
      <li ref="box">
        <div v-for="(item,index) in pages" :key="index" class="page" :style="'background:'+item.background">
             {{item.title}}
        </div>
      </li>
      <li class="side" ref="side">
        <div v-for="(items,indexs) in pages[0].sideList" :key="indexs">{{items.pageListTile}}</div></li>
    </ul>
  </div>
</template>
<script>
  import  funs  from '../../utils/animationUtil.js'
  console.log("funs",funs)
export default {
  name: 'test',
  data(){
    return {
      isClick:false,
      clientHeight:0,
      pages:[
        {title:'页面一',background:'lightblue',sideList:[
          { pageListTile:'页面一'},
          { pageListTile:'页面二'},
          { pageListTile:'页面三'},
          { pageListTile:'页面四'},
        ]},
        {title:'页面二',background:'lightsteelblue'},
        {title:'页面三',background:'red'},
        {title:'页面四',background:'blue'},
      ]
    }
  },
  mounted(){
    let father = this.$refs.father;
    this.allSide = this.$refs.side.children;
    let side=this.allSide
    let sideList=this.pages[0].sideList
    // let fatherClientHeight=father.clientHeight  //clientHeight 这个高度比实际高度小很多，不知道为什么
    let fatherHeight=parseInt(funs.getStyle(father,'height'))
     console.log("fatherClientHeight",fatherHeight)
       side[0].className='active' //默认第一个有颜色
    for(let i=0,len=sideList.length;len>i;i++){
        side[i].addEventListener('click',()=>{
           this.isClick=true
           for(let k=0,len=sideList.length;len>k;k++){
             side[k].className=''
           }
           side[i].className='active'
            funs.yundongAndToumin(father,{scrollTop:i*fatherHeight},()=>{
               this.isClick=false
            })
        //  father.scrollTop=i*this.clientHeight  //没有动画的变动
    })

    }
  
  },
  methods:{
    handlerScroll(e) {
        if(this.isClick){
          return
        }
       let box = this.$refs.box.children;
       let scrollTop = e.target.scrollTop
       let sideList=this.pages[0].sideList 
       console.log('scrollTop',scrollTop)
       console.log('box',box)
       for(let i=0,len=box.length;i<len;i++){
         if(scrollTop>box[i].offsetTop){
          for(let k=0,len=sideList.length;len>k;k++){
             this.allSide[k].className=''
           }
           this.allSide[i].className='active'
         }
       }
    
    }
  }
}
</script>
<style>

 .el-container{
  overflow: auto !important;
}
.page{
  width: 100vw;
  height: 100vh;
}
.side{
  width:100px;
  height: 100px;
  color: #fff;
  background: pink;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 30%;
  top: 50%;
  transform: translate(0,-50%);
  border-radius: 5px;
}
.side div:hover{
   color: bisque;
   background: lightgreen;
}
.active{
   color: bisque;
   background: lightgreen;
}

#box {
  width: 200px;
  height: 200px;
  background: lightpink;
  opacity: 0.3;
  filter: alpha(opacity: 30);
}
</style>
